<template>
  <main class="post">
    <a-form-model ref="userForm"
                  :rules="rules"
                  :label-col="labelCol"
                  :wrapper-col="wrapperCol" :model="form">
      <a-row>
        <a-col span="12">
          <a-form-model-item label="用户名" prop="userName">
            <a-input v-model="form.userName" placeholder="请输入用户名"/>
          </a-form-model-item>
        </a-col>
        <a-col span="12">
          <a-form-model-item label="密码" prop="password">
            <a-input v-model="form.password" placeholder="请输入联系方式"/>
          </a-form-model-item>
        </a-col>
        <a-col span="12">
          <a-form-model-item label="昵称" prop="nickName">
            <a-input v-model="form.nickName" placeholder="请输入昵称"/>
          </a-form-model-item>
        </a-col>
        <a-col span="12">
          <a-form-model-item label="角色" prop="roleId">
            <a-select v-model="form.roleId" :options="roleList" placeholder="请选择角色"/>
          </a-form-model-item>
        </a-col>
        <a-col span="12">
          <a-form-model-item label="联系方式" prop="phone">
            <a-input v-model="form.phone" placeholder="请输入联系方式"/>
          </a-form-model-item>
        </a-col>
        <a-col span="12">
          <a-form-model-item label="是否启用" prop="activeFlag">
            <a-switch v-model="form.activeFlag" default-checked checkedChildren="启用" unCheckedChildren="禁用"/>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="footer">
      <a-row>
        <c-btn offset="18" span="3" type="primary" title="保存" @click="save"></c-btn>
        <c-btn span="3" type="default" title="取消" @click="$emit('update:visible',false)"></c-btn>
      </a-row>
    </div>
  </main>
</template>

<script>
import {userAdd, userEdit} from "@/api/user";
import {findTrees} from "@/api/resource";
import {list} from "@/api/role";

export default {
  props: {
    type: {
      default: 'add'
    },
    editData: {
      default: {}
    },
  },
  data() {
    return {
      labelCol: {span: 5},
      wrapperCol: {span: 19},
      form: {
        userId: '',
        userName: "",
        nickName: "",
        phone: "",
        roleId: '1',
        activeFlag: "",
        password: ""
      },
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ]
      },
      treeData: [],
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      roleList: []
    }
  },
  async created() {
    await this.getRoleList()
    if (this.type === 'edit') {
      this.getEditData()
    }
  },
  methods: {
    async getRoleList() {
      const res = await list({});
      if (res['data']) {
        this.roleList = res['data']['list'].map(({roleId: value, roleName: label}) => ({label, value}))
      }
    },
    save() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
          if (this.type === 'add') this.setAddData();
          if (this.type === 'edit') this.setEditData()
        } else {
          this.$message.error('请完善表单信息')
        }
      })
    },
    async setAddData() {
      const params = {
        ...this.form
      }
      const res = await userAdd(params);
      if (res['msg'] === 'ok') {
        this.$message.success('添加成功')
        this.$emit('update:visible', false)
        this.$emit('success', res)
      } else {
        this.$message.error(res.msg);
      }
    },
    async setEditData() {
      const params = {
        ...this.form
      }
      const res = await userEdit(params);
      if (res['msg'] === 'ok') {
        this.$message.success('编辑成功')
        this.$emit('update:visible', false)
        this.$emit('success', res)
      } else {
        this.$message.error(res.msg)
      }
    },
    getEditData() {
      this.form = {...this.editData};
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
